<!-- 能耗数据统计 -->

<template>
  <div class="flex flex-col w-100% p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card-1 -->
    <div
      class="flex-1 flex flex-col mb-10px"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">石化基地能耗概览</span>

        <div class="flex items-center">
          <span class="mr-11px text-[#333] text-14px">选择时间</span>
          <el-date-picker
            v-model="nhglDate"
            type="daterange"
            format="YYYY-MM-DD"
            range-separator="至"
            unlink-panels
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="dateChangeFormat(nhglDate)"
          />
          <el-button
            type="primary"
            class="w-80px ml-50px rounded-15px"
            :icon="Search"
            @click="loadNyylZl"
            >查询</el-button
          >
          <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="resetNyylZl"
            >重置</el-button
          >
        </div>
      </div>
      <div class="w-100% flex-1 flex flex-wrap justify-evenly content-center">
        <div
          class="flex justify-between items-center w-30% h-110px mb-15px pl-30px pr-30px box-border bg-[#FFF0B1] rounded-4px text-[#FF9900]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.5)"
        >
          <img
            class="w-80px h-80px"
            src="../../../assets/image/dataConsumption/nhzl-icon.png"
            alt=""
          />

          <div>
            <div style="line-height: 1">
              <span class="text-63px" style="font-family: CenturyGothic">{{ nhzl }}</span>
              <span class="text-24px">万tce</span>
            </div>
            <div class="text-24px text-right">园区能耗总量</div>
          </div>
        </div>

        <div
          class="flex justify-between items-center w-30% h-110px mb-15px pl-30px pr-30px box-border bg-[#E7FFFB] rounded-4px text-[#00CD99]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.5)"
        >
          <img
            class="w-80px h-80px"
            src="../../../assets/image/dataConsumption/dhzl-icon.png"
            alt=""
          />

          <div>
            <div style="line-height: 1">
              <span class="text-63px" style="font-family: CenturyGothic">{{ dhzl }}</span>
              <span class="text-24px">万kwh</span>
            </div>
            <div class="text-24px text-right">园区电耗总量</div>
          </div>
        </div>

        <div
          class="flex justify-between items-center w-30% h-110px mb-15px pl-30px pr-30px box-border bg-[#EAF5FF] rounded-4px text-[#3399FF]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.42)"
        >
          <img
            class="w-80px h-80px"
            src="../../../assets/image/dataConsumption/zqzl-icon.png"
            alt=""
          />

          <div>
            <div style="line-height: 1">
              <span class="text-63px" style="font-family: CenturyGothic">{{ zqzl }}</span>
              <span class="text-24px">万t</span>
            </div>
            <div class="text-24px text-right">园区蒸汽总量</div>
          </div>
        </div>

        <div
          class="flex justify-between items-center w-30% h-110px pl-30px pr-30px box-border bg-[#E0E6FF] rounded-4px text-[#7B94FF]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.5)"
        >
          <img
            class="w-80px h-80px"
            src="../../../assets/image/dataConsumption/yszl-icon.png"
            alt=""
          />

          <div>
            <div style="line-height: 1">
              <span class="text-63px" style="font-family: CenturyGothic">{{ yszl }}</span>
              <span class="text-24px">万t</span>
            </div>
            <div class="text-24px text-right">园区用水总量</div>
          </div>
        </div>

        <div
          class="flex justify-between items-center w-30% h-110px pl-30px pr-30px box-border bg-[#FFE7E7] rounded-4px text-[#FF6666]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.42)"
        >
          <img
            class="w-80px h-80px"
            src="../../../assets/image/dataConsumption/rqzl-icon.png"
            alt=""
          />

          <div>
            <div style="line-height: 1">
              <span class="text-63px" style="font-family: CenturyGothic">{{ rqzl }}</span>
              <span class="text-24px">万m³</span>
            </div>
            <div class="text-24px text-right">园区燃气总量</div>
          </div>
        </div>

        <div
          class="flex justify-between items-center w-30% h-110px pl-30px pr-30px box-border bg-[#E3E5E8] rounded-4px text-[#6D7A9A]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.42)"
        >
          <img
            class="w-80px h-80px"
            src="../../../assets/image/dataConsumption/ymzl-icon.png"
            alt=""
          />

          <div>
            <div style="line-height: 1">
              <span class="text-63px" style="font-family: CenturyGothic">{{ ymzl }}</span>
              <span class="text-24px">万t</span>
            </div>
            <div class="text-24px text-right">园区用煤总量</div>
          </div>
        </div>
      </div>
    </div>

    <!-- card-2 -->
    <div
      class="flex-1 flex flex-col mb-10px"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">石化基地能耗趋势分析</span>

        <div class="flex items-center">
          <span class="mr-11px text-[#333] text-14px">选择时间</span>
          <el-date-picker
            v-model="nhqsfxDate"
            type="daterange"
            range-separator="至"
            unlink-panels
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="dateChangeFormat(nhqsfxDate)"
          />
          <el-button
            type="primary"
            class="w-80px ml-50px rounded-15px"
            :icon="Search"
            @click="loadNyylTjxx"
            >查询</el-button
          >
          <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="resetNyylTjxx"
            >重置</el-button
          >
        </div>
      </div>
      <div class="w-100% flex-1">
        <Echarts ref="nhqsfxEchats"></Echarts>
      </div>
    </div>

    <!-- card-3 -->
    <div class="flex-1 flex flex-col" style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">各企业能耗分析</span>

        <div class="flex items-center">
          <span class="mr-11px text-[#333] text-14px">选择时间</span>
          <el-date-picker
            v-model="nhfxDate"
            type="daterange"
            range-separator="至"
            unlink-panels
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="dateChangeFormat(nhfxDate)"
          />
          <el-button
            type="primary"
            class="w-80px ml-50px rounded-15px"
            :icon="Search"
            @click="loadQyNyylTjxx"
            >查询</el-button
          >
          <el-button
            class="w-80px bg-[#dceeff] rounded-15px"
            :icon="Refresh"
            @click="resetQyNyylTjxx"
            >重置</el-button
          >
        </div>
      </div>
      <div class="w-100% flex-1">
        <Echarts ref="nhfxEchats"></Echarts>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import moment from 'moment'
import { Search, Refresh } from '@element-plus/icons-vue'
import { dateChangeFormat } from '@/utils/date'

/** 石化基地能耗概览 start */
const nhglDate = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])

const nhzl = ref('0.00') //能耗总量
const dhzl = ref('0.00') //电耗总量
const zqzl = ref('0.00') //蒸汽总量
const yszl = ref('0.00') //用水总量
const rqzl = ref('0.00') //燃气总量
const ymzl = ref('0.00') //用煤总量

function loadNyylZl() {
  queryNyylZl({ kssj: nhglDate.value[0], jssj: nhglDate.value[1] }).then((res: any) => {
    nhzl.value = res.nhzl.toFixed(2)
    dhzl.value = res.dhzl.toFixed(2)
    zqzl.value = res.zqzl.toFixed(2)
    yszl.value = res.yszl.toFixed(2)
    rqzl.value = res.rqzl.toFixed(2)
    ymzl.value = res.ymzl.toFixed(2)
  })
}
loadNyylZl()

const resetNyylZl = () => {
  nhglDate.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  nhglDate.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')

  loadNyylZl()
}
/** 石化基地能耗概览 end */

/** 石化基地能耗趋势分析 start */
const nhqsfxEchats = ref(null) as any
const nhqsfxDate = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])

const shjdnhqsfxOption = {
  legend: {
    data: ['用电量', '用水量', '蒸汽量', '燃气量', '用煤量'],
    left: 'left',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  grid: {
    left: 100,
    right: 60,
    bottom: 30,
  },
  xAxis: [
    {
      type: 'category',
      data: [],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: '用煤量',
      type: 'bar',
      stack: 'Ad',
      data: [],
      barWidth: '16',
      itemStyle: {
        normal: {
          color: '#4970FF',
        },
      },
    },
    {
      name: '燃气量',
      type: 'bar',
      stack: 'Ad',
      data: [],
      barWidth: '16',
      itemStyle: {
        normal: {
          color: '#6AB5FF',
        },
      },
    },
    {
      name: '蒸汽量',
      type: 'bar',
      stack: 'Ad',
      data: [],
      barWidth: '16',
      itemStyle: {
        normal: {
          color: '#A7A7FF',
        },
      },
    },
    {
      name: '用水量',
      type: 'bar',
      stack: 'Ad',
      data: [],
      barWidth: '16',
      itemStyle: {
        normal: {
          color: '#8BD887',
        },
      },
    },
    {
      name: '用电量',
      type: 'bar',
      stack: 'Ad',
      data: [],
      barWidth: '16',
      itemStyle: {
        normal: {
          color: '#FFBE68',
        },
      },
    },
  ],
}

onMounted(() => {
  shjdnhqsfxOption.graphic = [
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        fill: '#999',
        text: '暂无数据',
        font: '14px Microsoft YaHei',
      },
    },
  ]
  nhqsfxEchats.value.initEchat(shjdnhqsfxOption)
})

function loadNyylTjxx() {
  queryNyylTjxx({ kssj: nhqsfxDate.value[0], jssj: nhqsfxDate.value[1] }).then((res: any) => {
    shjdnhqsfxOption.xAxis[0].data = []
    shjdnhqsfxOption.series.forEach((item: any) => {
      item.data = []
    })

    shjdnhqsfxOption.xAxis[0].data = res && res.sjList

    res &&
      res.nyYlzList &&
      res.nyYlzList.forEach((el: any) => {
        shjdnhqsfxOption.series.forEach((item: any) => {
          if (el.ylm == item.name) {
            item.data = el.ylz
          }
        })
      })

    if (shjdnhqsfxOption.xAxis[0].data) {
      shjdnhqsfxOption.graphic = null
    } else {
      shjdnhqsfxOption.graphic = [
        {
          type: 'text',
          left: 'center',
          top: 'middle',
          style: {
            fill: '#999',
            text: '暂无数据',
            font: '14px Microsoft YaHei',
          },
        },
      ]
    }

    nhqsfxEchats.value.initEchat(shjdnhqsfxOption)
  })
}
loadNyylTjxx()

const resetNyylTjxx = () => {
  nhqsfxDate.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  nhqsfxDate.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')

  loadNyylTjxx()
}

/** 石化基地能耗趋势分析 end */

/** 企业能耗分析 start */
const nhfxEchats = ref(null) as any
const nhfxDate = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])
const qynhfxOption = {
  legend: {
    data: ['用电量', '用水量', '蒸汽量', '燃气量', '用煤量'],
    left: 'left',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  grid: {
    left: 100,
    right: 60,
    bottom: 30,
  },
  dataset: {
    source: [],
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [],
}

onMounted(() => {
  qynhfxOption.graphic = [
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        fill: '#999',
        text: '暂无数据',
        font: '14px Microsoft YaHei',
      },
    },
  ]
  nhfxEchats.value.initEchat(qynhfxOption)
})
function loadQyNyylTjxx() {
  queryQyNyylTjxx({ kssj: nhfxDate.value[0], jssj: nhfxDate.value[1] }).then((res: any) => {
    qynhfxOption.series = []
    qynhfxOption.dataset.source = []

    const series =
      res &&
      res.nyYlzList &&
      res.nyYlzList.map((ny: any) => {
        return {
          name: ny.ylm,
          type: 'bar',
          barWidth: '6',
          itemStyle: {
            normal: {
              color:
                ny.ylm === '用电量'
                  ? '#FFBE68'
                  : ny.ylm === '用水量'
                  ? '#8BD887'
                  : ny.ylm === '蒸汽量'
                  ? '#A7A7FF'
                  : ny.ylm === '燃气量'
                  ? '#6AB5FF'
                  : ny.ylm === '用煤量'
                  ? '#4970FF'
                  : '#000000',
            },
          },
        }
      })

    const source =
      res &&
      res.qymcList &&
      res.qymcList.map((qymc: any, i: any) => {
        return [
          qymc,
          ...res.nyYlzList.map((ny: any) => {
            return ny.ylz[i]
          }),
        ]
      })

    if (series && source) {
      qynhfxOption.graphic = null
      qynhfxOption.series = series
      qynhfxOption.dataset.source = source
    } else {
      qynhfxOption.graphic = [
        {
          type: 'text',
          left: 'center',
          top: 'middle',
          style: {
            fill: '#999',
            text: '暂无数据',
            font: '14px Microsoft YaHei',
          },
        },
      ]
    }

    nhfxEchats.value.initEchat(qynhfxOption)
  })
}
loadQyNyylTjxx()

const resetQyNyylTjxx = () => {
  nhfxDate.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  nhfxDate.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')

  loadQyNyylTjxx()
}

/** 企业能耗分析 end */
</script>

<style scoped></style>
